| 【VScode】画出逻辑清晰的UML | 您所在的位置：网站首页 › vscode drawio导出的图片存放在哪里 › 【VScode】画出逻辑清晰的UML |
【VScode】画出逻辑清晰的UML
|
背景
无论是作为程序员还是产品经理，都不可避免的需要输出逻辑清晰的UML【时序图/活动图（流程图）/状态图等等】，从而清晰的表达展示自己内心想法。但多数情况，大部分人面对复杂的业务逻辑，往往将图示绘制得复杂难懂，反而失去了应减轻理解逻辑成本的基本目的。故，不才总结自己面对实际情况的经验并分享出来，共勉。 跳过介绍，直奔主题： 使用PlantUML 什么是UMLUML是统一建模语言的简称，详细可见： https://www.visual-paradigm.com/cn/guide/uml-unified-modeling-language/what-is-uml/ PlantUML是一个可以让你快速编写UML图的组件，详细可见： https://plantuml.com/zh/starting 本人常用的图为：模块图/状态图（流程图）+ 时序图 为什么选择PlantUMLStrengths: 由代码自动生成图片，避免由于逻辑调整反复挪动图片排版，浪费时间 编写语言简洁易懂，学习成本不高 汇总建模语言，时序图、流程图、状态图、类图等等概括非常全Weaknesses: 支持在线编写PlantUML的平台不多，目前腾讯文档、石墨、蓝湖等常用的在线协作平台都不支持 生成的样式有点80年代风格，若想调整，自定义较为麻烦Opportunities: Markdown画写流程图的语法较为繁琐，且不同类型的图需要安装不同的插件（mermaid/flow..），学习成本高，一旦设计复杂逻辑，代码会显得复杂且难以通用 drawio、processon、visio等图形绘制，涉及逻辑改动往往会大篇幅调整（本人也常常因为强迫症调整排版而耗费大量时间精力，实在可惜）Threats: （没什么吧..） 绘制UML环境选择语雀 （优点）直接支持在文本中输入/PlantUML进行绘制 （缺点）个人非常喜欢语雀，在撰写文档的时候使用非常顺滑，可惜权限设置太严格，不适用于移动端快速分享权限，故放弃。PlantUML官网 （优点）可快速试用：http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000 （缺点）仅适用于试用场景VScode + PlantUML（个人推荐🥇） （优点）：vscode插件很多，直接markdown + plantuml导出非常方便，另作为研发，对vscode情有独钟 （优点）：不再受限于平台，导出png后想放哪放哪 （缺点）：都是离线导出文件，再贴出去，肯定是没有语雀这种在线协作来得方便 使用PlantUML下载VSCode插件ext install plantuml
准备plantuml需要的环境 软件要求： Java: 是运行PlantUML的必需条件, 请在您的环境中安装Java。 graphviz-dot: 可选的, 但是建议安装 (如果想绘制 除时序图和活动图以外的图, 就需要安装 Graphviz 软件)。 a. MacOS brew install --cask temurin brew install graphvizb. Windows 准备好VScode、PlantUML插件、JAVA环境、graphviz就行，不做赘述。(可直接参考PlantUML的VScode插件介绍) 进入VScode新建文件*.puml 测试代码 模块图示例描述登陆相关的页面交互 @startuml frame 登陆页 frame 微信扫码页 frame 首页 { frame 首页头像弹窗 { frame "绑定/解绑" note right { （支持微信号及手机号的绑定与解绑） } frame "修改密码" frame "退出登陆" } } frame 修改密码页 登陆页 -right-> 首页:手机号/账号 + 密码登陆 登陆页 -down-> 微信扫码页:微信扫码登陆 微信扫码页 --> 首页 修改密码 -up-> 修改密码页 修改密码页 -up-> 登陆页 退出登陆 -up-> 登陆页 @endumlPlantUML Preview:
描述审批相关示例 @startuml |发起人| start :发起审批; |审批人| :收到审批待办通知; :操作审批; split |发起人| :收到审批结果通知; end split again |审批人| if (审批是否通过) then (No) |审批人| end else (Yes) |抄送人| :收到审批结果(已通过)通知; endif end @endumlPlantUML Preview:
|
【本文地址】